.content {
  @apply rounded flex bg-white relative flex-col pb-10;
  width: 50rem;
  height: 31.25rem;
  border-radius: 0.625rem;
  font-family: Alibaba PuHuiTi 2;

  .close {
    @apply absolute right-5 top-5 w-5 h-5 cursor-pointer z-inherit;
  }

  .titleHead {
    @apply w-full text-xl font-bold text-black shrink-0;
    height: 8.125rem;
    background-size: 100% 100%;
    background-image: url('/images/score-modal-title.webp');
    padding-top: 1.875rem;
  }

  .mainContent {
    @apply flex-1 overflow-y-auto pb-5;
    margin-top: -3.125rem;
    width: calc(100% - 2.5rem);
    margin-left: 1.875rem;

    &::-webkit-scrollbar {
      width: 0.375rem;
    }

    &::-webkit-scrollbar-thumb {
      @apply rounded;
      background-color: #eee;
    }

    &::-webkit-scrollbar-track {
      background: #f7f8fa;
    }

    .loading {
      @apply w-full h-full flex items-center justify-center;
    }

    .loadMore {
      @apply h-5;
    }

    .mainItem {
      @apply w-full flex items-center;
      text-indent: 2.5rem;
      border-bottom: 0.0625rem solid rgba(151, 151, 151, 0.2);
      height: 2.875rem;

      span {
        @apply text-base;
        font-family: PingFang SC;

        &.span1 {
          color: #aaaaaa;
        }

        &.span2 {
          @apply flex-1 block text-left px-10;
          color: #1a1a1a;
        }

        &.span3 {
          @apply font-bold pr-10;

          &.add {
            color: #ff8032;
          }

          &.sub {
            color: #339cff;
          }
        }
      }
    }
  }
}

.null {
  @apply flex flex-col w-full items-center;
  padding-top: 5rem;

  .img {
    width: 15rem;
    height: 12.5rem;
  }

  .span {
    @apply text-xl leading-5 mt-5;
    font-family: PingFang SC;
    color: #aaaaaa;
  }
}

@media screen and (max-width: 767px) {
  .content {
    width: calc(100vw - 2rem);
    height: 27.5rem;

    .titleHead {
      @apply pt-5;
      height: 4.375rem;
    }

    .mainContent {
      @apply ml-3 mt-0;
      width: calc(100% - 1.5rem);

      .mainItem {
        height: 2.875rem;
        text-indent: 0;

        span {
          @apply text-sm;

          &.span2 {
            @apply px-2;
          }

          &.span3 {
            @apply font-bold pr-3;
          }
        }
      }
    }
  }

  .null {
    @apply pt-10;

    .img {
      width: 8.75rem;
      height: 6.25rem;
    }

    .span {
      @apply text-sm;
    }
  }
}
